<template>
    <div class="subClass">
        <div class="item">
            <p class="title">子类<el-button type="text" @click="addSub('add')" class="btn">[ + ]</el-button></p>
        </div>
        <div class="item" v-for="item in sonList">
            <p>{{item.name}}<el-button type="text" @click="addSub('edit',item)" class="btn">编辑</el-button><el-button @click="delSub(item.id)" type="text">删除</el-button></p>
            <span v-for="ite in item.problem">{{ite.name}}</span>
            <el-button type="text" @click="addProblem('add',item)">添加/编辑</el-button>
        </div>
    </div>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            parent:'',
            sonList:[]
        }
    },
    created(){
        this.selectList()
        this.$root.$on('large',parent=>{
            this.parent=parent
            if(!parent){ //判断大类是否为空
                this.sonList=[]
            }else{
                this.selectList()
            }
        })
        this.$root.$on('saveSub',type=>{
            this.selectList()
        })
    },
    methods:{
        addSub(type,item){
            this.$root.$emit('addSub',type,this.parent,item)
        },
        delSub(id){ //删除子类
            let that=this
            request.delAlert({
                name:'删除该子类',
                that,
                fn(obj){
                    let url='sonType/'+id+'?greenToken='+request.greenToken
                    request.ajaxDel({
                        url,
                        that,
                        fn(res){
                            that.$message(obj)
                            that.selectList()
                        }
                    })
                }
            })
        },
        addProblem(type,item){  //添加编辑列表
            this.$root.$emit('addProblem',type,item)
        },
        selectList() { //查询子类列表
            let url = "sonType";
            let that=this   //解决this指向问题
            let parent=this.parent
            if(!parent){
                return
            }
            let pId={
                parentId:parent.id,
            }
            request.ajaxGet({ //查询所有大类下面所有的子类
                url,
                that,
                params:pId,
                fn(res){
                    let url1='problemType'
                    let data=res
                    
                    for(let i in res){
                        let sId={
                            sonId:res[i].id,
                        }
                        res[i].problem=[]
                        request.ajaxGet({ //查询所有子类下面的  问题
                            url:url1,
                            that,
                            params:sId,
                            fn(res1){
                                res[i].problem=res1
                            }
                        })
                    }
                    that.sonList=res
                }
            })
        }
    },
    
}
</script>
<style lang="less" scoped>
.subClass{
    flex-grow:1;
    background: #ffffff;
    height: 100%;
    box-sizing: border-box;
    padding: 0px 15px;
    .item{
        width:100%;
        border-bottom: 1px solid #eeeeee;
        text-align: left;
        font-size: 14px;
        span{
            margin-right: 10px;
            color: #000000;
            font-weight: 600;
        }
    }
    .title{
        color: #999999;
        font-size:16px; 
    }
    .btn{
        margin-left: 10px
    }
}
</style>
